<template>
	<!-- 个人认证 -->
	<view class="attestation">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="个人认证"></tab-top>
		<!-- #endif -->
		
		<view class="bg_01"></view>
		<view class="set_box">
			<view class="set_item">
				<view class="set_item_left">
					<text>姓名</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="text" value="" v-model="name" placeholder="请输入真实姓名"/>
				</view>
			</view>
			<view class="set_item">
				<view class="set_item_left">
					<text>身份证号</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="idcard" v-model="id_card" placeholder="请输入您的身份证号"/>
				</view>
			</view>
		</view>	
		
		<view class="bg_02"></view>
		<view class="attestation_main">
			<view class="title">请上传本人的身份证正反面照片</view>
			<view class="attestation_item">
				<image class="attestation_Img" 
				@tap="changeImg('positive_photo')"
				:src="positive_photo ? positive_photo + '?imageView2/1/w/552/h/297' : '/static/bg/front.png'"></image>
			</view>
			<view class="attestation_item box">
				<image class="attestation_Img" 
				@tap="changeImg('negative_photo')"
				:src="negative_photo ? negative_photo +'?imageView2/1/w/552/h/297' : '/static/bg/reverse.png'"></image>
			</view>
			<view class="attestation_text">
				<image class="safeguard" src="/static/icon/safeguard.png"></image>
				<text>信息已加密，仅用于身份认证</text>
			</view>
		</view>
		
		<button class="button" @tap="attestation">提交认证</button>
		<view class="bg_03"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				name:'',
				id_card:'',
				positive_photo:'',
				negative_photo:'',	
			}
		},
		onLoad() {
			this.userInfoData();
		},
		methods: {
			async attestation() {
				/**
				 * 提交认证
				 */
				if(!this.formValidation()){ //表单验证
					return;
				}
				let [_user,user] = await this.userinfo()	 
				if(_user || user.data.status == 0){   //用户信息
					this.showToast('提交失败，请重试'); 
					return;
				}
				let url,data,method;
				if(user.data.data.user){ //判断用户第几次提交
					url = 'user/cleaner/' + this.isLogin().id
					method = 'PUT'
					data = JSON.parse(JSON.stringify(this._data))
					data.user_auth = 2
				}else{
					url = 'user/cleaner'
					method = 'post'
					data = JSON.parse(JSON.stringify(this._data))
					data.id = this.isLogin().id
					data.user_auth = 2
				}
				let [_upload,upload] = await this.getReq({url,method,data})
				if(_upload || upload.data.status == 0){
					this.showToast('提交失败，请重试'); 
					return;
				}
				uni.navigateTo({
					url: '/pages/user/auditor'
				});
			},
			async changeImg(img){
				/**
				 * 获取七牛云图片链接
				 */
				let [_chooseImage,chooseImage] = await uni.chooseImage({count: 1});
				if(_chooseImage){ 
					this.showToast('图片上传失败');
					return;
				}
				let images = chooseImage.tempFilePaths[0]; //获取图片
				let key = 'attestation:' + new Date().getTime() + '.png'; //图片名称
				let qiniuImg = await this.qiniuUpload(images,key);
				if(!qiniuImg.imageURL){
					return;
				}
				this[img] = qiniuImg.imageURL //七牛返回路径
			},
			async userInfoData(){
				/**
				 * 获取用户信息
				 */
				let [_user,user] = await this.userinfo()
				if(_user || user.data.status == 0 || !user.data.data.user){
					return; //获取用户信息失败
				}
				for(let val in user.data.data.user){
					for(let v in this._data){
						if(val == v) this._data[v] = user.data.data.user[val]
					} 
				} 
			
			},
			userinfo(){
				/**
				 * user 获取用户状态
				 */
				return this.getReq({
					url:'user/accountInfo',
					data:{
						id:this.isLogin().id
					}
				})
			},
			formValidation(){
				/**
				 * 表单验证
				 */
				if(!this.regularVerification('name',this.name)){
					this.showToast("真实姓名格式有误");
					return false;
				}
				if(!this.regularVerification('id_card',this.id_card)){
					this.showToast("请填写正确的身份证");
					return false;
				}
				if(!this.positive_photo){
					this.showToast("请上传身份证正面");
					return false;
				}
				if(!this.negative_photo){
					this.showToast("请上传身份证反面");
					return false;
				}
				return true;
			}
		}
	}
</script>


<style lang="scss" scoped>
.attestation{
	color: #333333;
	.set_box{
		width: 702upx;
		padding: 0 24upx;
		.set_item{
			height: 98upx;
			border-bottom: 1upx solid #e5e5e5;
			line-height: 98upx;
			display: flex;
			justify-content: space-between;
			.set_item_left{
				font-size: 28upx;
			}
			.set_item_reght{
				font-size: 28upx;
				color: #999999;
				display: flex;
				align-items: center;
				.input[type]{
					margin-left: 40upx; 
					font-size: 28upx;
					line-height: 98upx;
					height: 28upx;
					text-align: right;
				}
			}
		}
	}
	.attestation_main{
		text-align: center;
		.title{
			height: 98upx;
			line-height: 98upx;
			font-size: 32upx;
		}
		.attestation_item{
			margin: 0 auto;
			width: 564upx;
			height: 309upx;
			border-radius: 8upx;
			border: 1upx dashed #e5e5e5;
			.attestation_Img{
				width: 552upx;
				height: 297upx;
				background-color: #9ccafa;
				border-radius: 8upx;
			}
		}
		.box{
			margin-top: 30upx;
		}
		.attestation_text{
			height: 46upx;
			line-height: 46upx;
			font-size: 18upx;
			color: #b5b5b5;
			.safeguard{
				width: 16upx;
				height: 18upx;
				margin-right: 8upx;
				vertical-align: middle;	
			}
		}
	}
	.button{
		margin-top: 124upx;
		width: 540upx;  
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
	}
	.bg_01{
		width: 750upx;
		height: 30upx;
		background-color: #f0f0f0;
	}
	.bg_02{
		width: 750upx;
		height: 62upx;
	}
	.bg_03{
		width: 750upx;
		height: 46upx;
	}
}
</style>

